<template>
  <div class="PublicListStyle MkCloseOrder">
    <mk-search-component :formArr="formArr" labelWidth="90px"  inputPlaceholder = "订单号/商品名称/店铺名称/购买人/联系电话" @startSearch="fun_call_search">
    </mk-search-component>
    <div class="primary_bg trHasCursor tabContainer" v-loading="loadingTab"
         element-loading-text="拼命加载中">
      <el-table
        :data="treatedOrderData.elements"
        style="width: 100%"
        @row-click='showOrderDetail'
        @cell-click="cellClick">
        <el-table-column
          type="expand"
          width="40px"
          class="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <template v-for="item in props.row.orderDetailDtos">
                <p>
                  <el-form-item label="商品ID：">
                    <span class="order_item">{{item.goodsId}}</span>
                  </el-form-item>
                  <el-form-item label="商品条形码：">
                    <span class="order_item">{{props.row.goodsCode}}</span>
                  </el-form-item>
                  <el-form-item label="商品名称：">
                    <span class="order_item">{{item.goodsName}}</span>
                  </el-form-item>
                  <el-form-item label="单价（元）：">
                    <span class="order_item">{{item.price}}</span>
                  </el-form-item>
                  <el-form-item label="数量：">
                    <span class="order_item">{{item.amount}}</span>
                  </el-form-item>
                </p>
              </template>
              <p>
                <el-form-item label="应付额：">
                  <span class="order_item">{{props.row.shouldPay}}</span>
                </el-form-item>
                <el-form-item label="实付额：">
                  <span class="order_item">{{props.row.realyPay}}</span>
                </el-form-item>
              </p>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderNumber"
          label="订单号"
          show-overflow-tooltip
          width="170px">
        </el-table-column>
        <!--<el-table-column-->
          <!--prop="goodsCode"-->
          <!--label="商品条形码"-->
          <!--show-overflow-tooltip-->
          <!--width="130px">-->
        <!--</el-table-column>-->
        <el-table-column
          width='250'
          prop="shopName"
          show-overflow-tooltip
          label="店铺名称">
        </el-table-column>
        <el-table-column
          prop="orderTime"
          width=''
          label="下单时间"
          :formatter="formatDate">
        </el-table-column>
        <el-table-column
          width=''
          prop="purchaser"
          label="购买人">
        </el-table-column>
        <el-table-column
          width='180'
          prop="phone"
          label="联系电话">
        </el-table-column>
      </el-table>
      <el-pagination v-if='treatedOrderData.elements.length>0'
                     @current-change="loadOrder"
                     :current-page="treatedOrderData.page"
                     :page-size="treatedOrderData.size"
                     layout="total, prev, pager, next"
                     :total="treatedOrderData.totalAmount">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import orderService from './../../services/order'
  export default {
    name: 'MkCloseOrder',
    props: ['clickFlowTab'],
    watch: {
      clickFlowTab(val) {
        if(val=='sixth'){
          this.loadOrder();
        }
      }
    },
    mounted:function() {
      this.$set(this.formArr,0,{
        formLabel:'下单时间从',
        split:'-',
        placeholder:{first:'选择开始日期',second:'选择结束日期'},
        searchName:{first:'startDate',second:'endDate'},
        hasTwoComponent:true,
        dataType:'date',
        dataFormat:'yyyy-MM-dd',
        componentType:'Date',
        pickerOptions:{
          first:{
            disabledDate(time) {
              return time.getTime() > new Date();
            }
          },
          second:{
            disabledDate(time) {
              return time.getTime() < new Date();
            }
          }

        },
      })
    },
    activated(){

    },
    methods: {
      fun_call_search(search,input) {
        this.searchCondition.startDate = search.startDate?search.startDate.pattern("yyyy-MM-dd"):'';
        this.searchCondition.endDate = search.endDate?search.endDate.pattern("yyyy-MM-dd"):'';
        this.searchCondition.search  = input;

        let that = this;
        this.formArr[0].pickerOptions.first.disabledDate = function(time){
          const date = new Date();
          if (that.searchCondition.endDate) {
            return time.getTime() > date || time.getTime() > new Date(that.searchCondition.endDate);
          } else {
            return time.getTime() > date;
          }
        }
        this.formArr[0].pickerOptions.second.disabledDate = function(time){
          const date = new Date();
          if (that.searchCondition.startDate) {
            return time.getTime() > date || time.getTime() < new Date(that.searchCondition.startDate).getTime() - 3600 * 1000 * 24;
          } else {
            return time.getTime() > date;
          }
        }

        this.loadOrder(1);
      },
      loadOrder(page) {
        if(page) {
            this.searchCondition['page.pn'] = page;
        }
        this.loadingTab = true;
        orderService.loadOrderListServer(this.searchCondition, (data) => {
          this.treatedOrderData = data.data;
          this.loadingTab = false;
        })
      },
      cellClick(row,column){
        this.clickColumn=column.type;
      },
      showOrderDetail (row, event, column) {
        if(this.clickColumn!=='expand'){
          this.$router.push({name: 'MkOrderDetail',query:{path:'/orderListMgt',tab:'sixth',id: row.orderId}})
        }
      },
      formatAuditStatus(row, column, cellValue){
        if(cellValue=='WaitAudit'){
          return '待审核'
        }else if(cellValue=='Invalid'){
          return '无效订单'
        }else if(cellValue=='Valid'){
          return '有效订单'
        }
      },
      formatOrderStatus(row, column, cellValue){
        if(cellValue=='WaitPay'){
          return '待付款'
        }else if(cellValue=='WaitDeliver'){
          return '待发货'
        }else if(cellValue=='Delivered'){
          return '已发货'
        }else if(cellValue=='Finished'){
          return '已完成'
        }else if(cellValue=='Closed'){
          return '已关闭'
        }
      },
      formatDate(row, column, cellValue){
        return new Date(cellValue).pattern("yyyy-MM-dd HH:mm")
      },
    },
    data () {
      return {
        formArr:[],
        loadingTab: false,
        clickColumn:'',
        searchCondition: {
          'page.pn': 1,
          'page.size': 10,
          search:'',
          startDate:'',
          endDate:'',
          auditStatus:'',
          orderStatus:'Closed',
        },
        treatedOrderData: {
          elements: [
          ],
          page: '',
          size: '',
          totalPages: '',
          totalAmount: ''
        }
      }
    },
  }
</script>
<style lang='less'>
</style>
